/**
 * Generates a set of style rules for the "navigation" tab UI.
 */
@include extjs-tab-panel-ui(
        $ui: 'navigation',
        $ui-tab-background-color: transparent,
        $ui-tab-background-color-over: #505050,
        $ui-tab-background-color-active: #303030,
        $ui-tab-background-gradient: 'none',
        $ui-tab-background-gradient-over: 'none',
        $ui-tab-background-gradient-active: 'none',
        $ui-tab-color: #acacac,
        $ui-tab-color-over: #c4c4c4,
        $ui-tab-color-active: #fff,
        $ui-tab-glyph-color: #acacac,
        $ui-tab-glyph-color-over: #c4c4c4,
        $ui-tab-glyph-color-active: #fff,
        $ui-tab-glyph-opacity: 1,
        $ui-tab-border-radius: 0,
        $ui-tab-border-width: 0,
        $ui-tab-inner-border-width: 0,
        $ui-tab-padding: 24px,
        $ui-tab-margin: 0,
        $ui-tab-font-size: 15px,
        $ui-tab-font-size-over: 15px,
        $ui-tab-font-size-active: 15px,
        $ui-tab-line-height: 19px,
        $ui-tab-font-weight: bold,
        $ui-tab-font-weight-over: bold,
        $ui-tab-font-weight-active: bold,
        $ui-tab-icon-width: 24px,
        $ui-tab-icon-height: 24px,
        $ui-tab-icon-spacing: 5px,
        $ui-bar-background-color: #404040,
        $ui-bar-background-gradient: 'none',
        $ui-bar-padding: 0,
        $ui-strip-height: 0
);

/**
 * Generates a set of style rules for the "navigation" panel UI.
 */
@include extjs-panel-ui(
        $ui: 'navigation',
        $ui-header-color: #fff,
        $ui-header-glyph-color: #fff,
        $ui-header-glyph-opacity: 1,
        $ui-header-font-size: 20px,
        $ui-header-line-height: 24px,
        $ui-header-font-weight: bold,
        $ui-header-icon-height: 24px,
        $ui-header-icon-width: 24px,
        $ui-header-icon-spacing: 15px,
        $ui-header-background-color: $base-color,
        $ui-header-padding: 0,
        $ui-header-text-margin: 36px,
        $ui-header-noborder-adjust: false
);

.x-title-icon-navigation {
  font-family: FontAwesome;
  color: #fff;
  font-size: 24px;
  line-height: 24px;
}

.x-tab-icon-el-navigation {
  font-family: FontAwesome;
  color: #acacac;

  .x-tab-over & {
    color: #c4c4c4;
  }

  .x-tab-active & {
    color: #fff;
  }
}

.x-panel-header-title-navigation > .x-title-text-navigation:after {
  top: 30px;
  right: -24px;
}

@include treelist-ui(
        $ui: 'nav',
          // Extra padding left/right
        $padding: 0 10px,
          // Black-ish background color
        $background-color: #32404e,
        $toolstrip-background-color: #32404e,
        $tool-selected-color: #f0f0f0,
        $tool-selected-background-color: #5fa2dd,
        $tool-float-indicator-width: 4px,
        $tool-float-indicator-color: #5fa2dd,
          // Darker background for expanded subtrees
        $item-expanded-background-color: #2c3845,
          // Taller line height
        $item-line-height: 64px,
          // Off-white text
        $item-icon-color: #ADB3B8,
        $item-expander-color: #ADB3B8,
        $item-text-color: #ADB3B8,
          // Brighter when hovered
        $row-over-background-color: #4f606f,
        $item-icon-over-color: #fff,
        $item-expander-over-color: #fff,
        $item-text-over-color: #fff,
        $row-indicator-width: 6px,
        $row-indicator-selected-color: #5fa2dd,
        $row-indicator-selected-over-color: lighten(#5fa2dd, 10%),
        $row-indicator-over-color: lighten(#5fa2dd, 10%),
          // Various sizes for the pieces:
        $item-icon-font-size: 18px,
        $item-icon-width: 24px,
        $item-expander-font-size: 16px,
        $item-expander-width: 24px,
        $row-selected-background-color: #3f505f
);

@include treelist-ui(
        $ui: 'nav-light',
          // Extra padding left/right
        $padding: 0 10px,
          // Black-ish background color
          //$background-color: #ffefbb,
          //$toolstrip-background-color: #32404e,
        $tool-selected-color: #f0ba06,
          //$tool-selected-background-color: #5fa2dd,
          //$tool-float-indicator-width: 4px,
          //$tool-float-indicator-color: #5fa2dd,
          // Darker background for expanded subtrees
          //$item-expanded-background-color: #2c3845,
          // Taller line height
        $item-line-height: 64px,
          // Off-white text
          //$item-icon-color: #ADB3B8,
          //$item-expander-color: #ADB3B8,
          //$item-text-color: #ADB3B8,
          // Brighter when hovered
          //$row-over-background-color: #4f606f,
          //$item-icon-over-color: #fff,
          //$item-expander-over-color: #fff,
          //$item-text-over-color: #fff,
        $row-indicator-width: 6px,
        $row-indicator-selected-color: #5fa2dd,
        $row-indicator-selected-over-color: lighten(#5fa2dd, 10%),
        $row-indicator-over-color: lighten(#5fa2dd, 10%),
          // Various sizes for the pieces:
        $item-icon-font-size: 18px,
        $item-icon-width: 24px,
        $item-expander-font-size: 16px,
        $item-expander-width: 24px //$row-selected-background-color: #3f505f
);

.treelist-with-nav .x-panel-body {
  background-color: #32404e;
}

.treelist-with-nav .x-treelist-item-expandable {
  .x-treelist-item-icon {
    cursor: pointer;
  }

  .x-treelist-item-text {
    cursor: pointer;
  }
}

@mixin box-shadow(
  $box-shadow-val
) {
  -webkit-box-shadow: $box-shadow-val;
  -moz-box-shadow: $box-shadow-val;
  -ms-box-shadow: $box-shadow-val;
  box-shadow: $box-shadow-val;
}

.toolbar-btn-shadow {
  @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.border-shadow {
  @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.x-panel-border-radius {
  border-radius: 15px;
  .x-panel-body {
    padding: 10px 10px 10px 10px;
  }
}
